<template>
	<public-view navType="other" navTitle="详情">
		<view>
			<circle-box @playVideo="playFullScreen" :isInfo="true" :item="item"></circle-box>
		</view>
	</public-view>
	<view class="" v-if="show_video" style="width: 750rpx;height: 100vh;position: fixed;top: 0;left: 0;z-index: 999;">
		<view class="video-mask">
			
		</view>
		<view class="color-fff" style="position: absolute;z-index: 100;right: 50rpx;" @click="closeVi" :style="{top:paddingTop}">
			关闭
		</view>
		<dom-video style="position: absolute;z-index: 10;" ref="playVideo" :src="video_src" :autoplay="true" :loop="false" :controls="true"></dom-video>
	</view>
</template>

<script>
	import circleBox from "@/components/myComponents/circleBox.vue"
	import isDomVideo from "@/components/ls-dom-video/ls-dom-video.vue"
	export default {
		components:{
			"circle-box":circleBox,
			"dom-video":isDomVideo
		},
		data() {
			return {
				item:{},
				id:"",
				video_src:"",
				show_video:false,
				paddingTop:0
			};
		},
		onLoad(o) {
			this.id = o.id
			this.getInfo()
			// #ifdef APP-PLUS
			plus.runtime.arguments=null
			// #endif
			this.initNavBar()
		},
		methods:{
			initNavBar(){
				let sys = uni.getSystemInfoSync()
				this.paddingTop = sys.statusBarHeight+'px'
			},
			closeVi(){
				this.show_video = false
				this.$refs.playVideo.stop()
			},
			playFullScreen({url}) {
				// this.$refs[id][0].play()
				// console.log(this.$refs['fullScreen'+index])
				this.video_src = url
				this.show_video = true
				this.$refs.playVideo.play()
			  // var videoContext = uni.createVideoContext(id, this);
			  // videoContext.play();
			  // videoContext.requestFullScreen();
			},
			getInfo(){
				let that = this
				that.util.getRequest({
					url:"v1/content/socialize_edit",
					data:{
						id:that.id,
					}
				}).then(res=>{
					console.log(res)
					that.item = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-mask{
		position: absolute;
		left: 0;
		top: 0;
		background: #000;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
</style>
